import { defineComponent, ref } from "vue";

export default defineComponent(() => {
  const menu = ref([
    {
      name: "12121",
      key: "1",
      children: [],
    },
    {
      name: "222",
      key: "3",
      children: [
        {
          name: "wwew",
          key: "21eeeee",
          children: [],
        },
      ],
    },
    {
      name: "222",
      key: "2",
      children: [
        {
          name: "2323232",
          key: "21",
          children: [],
        },
        {
          name: "34345",
          key: "wwww",
          children: [
            {
              name: "wwwwww",
              key: "dwdwd",
              children: [],
            },
          ],
        },
      ],
    },
  ]);
  const renderMemu = (node) => {
    return node.map((item, index) => {
      console.log(item);
      return (
        <li>
          <div>{item.name}</div>
          {item.children ? <ul>{renderMemu(item.children)}</ul> : <></>}
        </li>
      );
    });
  };
  const render = () => {
    return (
      <>
        <ul>{renderMemu(menu.value)}</ul>
      </>
    );
  };
  return render;
});
